<script>
import * as echarts from 'echarts';

export default {
  name: "App",
  data(){
    return {
      mytitle:123111,
      mystyle:{
        width: '400px',
        height: '600px',
      },
    }
  },
  methods:{
    changeDiv(){
      this.mystyle.width="1000px"
      this.$nextTick(()=>{
        console.log("nextTick")
        this.myChart.resize()
      })
    }
  },
  beforeCreate() {
    console.log("before create " + this.mytitle)   //undefined
  },
  created() {
    //初始化工作 可以访问到mytitle，vue还未编译完，但是无法访问dom中的东西
    console.log("before create " + this.mytitle)
  },
  beforeMount() {
    //插入dom前，编译完成后
    console.log("before mount  " + this.mytitle)
  },
  mounted() {
    console.log("mounted  " + this.mytitle)
    //插入dom后

// 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('main'));
// 绘制图表
    this.myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
  ,unmounted() {
    console.log("unmounted  " + this.mytitle)
    //从dom树中移除时
  },
  beforeUpdate() {
    //当数据发生改变，渲染之前执行
    console.log("beforeUpdate  " + this.mytitle)
  },
  updated() {
    //页面重新渲染后执行
    console.log("updated  " + this.mytitle)
  }

}
</script>

<template>
  <div>
    {{mytitle}}
    <input v-model="mytitle" @input="mytitle=$event.target.value">
  </div>

  <div id="main" :style="mystyle">
  </div>

  <div>
    <button @click="changeDiv">改变div大小</button>
  </div>


</template>

<style scoped>

</style>